<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>${headerTitle}</title>
	<base href="<%=basePath%>/" />

  	<meta name="renderer" content="webkit" /><!-- 浏览器高速模式 -- >
  	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /><!-- IE的渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    
	<meta name="keywords"
		content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description"
		content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
	
	<link href="css/common.css" rel="stylesheet" />
	<link href="bootstrap/3.2/css/bootstrap.css" rel="stylesheet" />
	
	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>
	
	<script src="index/js/index.js" type="text/javascript"></script>
	<script src="scripts/jquery/tableSorter/scripts/JQueryPlugin/TableSort.js" type="text/javascript"></script>	
	
	<script type="text/javascript">
			var msg = "${msg}";
			if(msg!="")
				alert(msg);
			function del(id){
				if(confirm("确定删除吗？"))
					location.href="<%= basePath%>/${action}?method=delete&id="+id;
			}
			function dele(id){
				if(confirm("确定要锁定吗？"))
					location.href="<%= basePath%>/${action}?method=locking&id="+id;
			}
			function delet(id){
				if(confirm("确定要解锁吗？"))							
					location.href="<%= basePath%>/${action}?method=delocking&id="+id;
			}
			function view(id){
				window.location.href = "<%= basePath%>/${action}?method=view&id="+id;
			}
		
			$(document).ready(function(){
				
				$("ul.nav-tabs li").click(function(){
					var tab = $(this);
					var nav = tab.parent();
					$(nav).children("li").each(function()
					{
						var obj = $(this);
						obj.removeClass("active");
					});
					tab.addClass("active");
				});
	    	});
	    	
		</script>
	
	<style>
		body {
			margin-left: 10px;
			margin-top: 7px;
			width:98%;
			min-width:1000px;
			font-size:10px;
		}
		.form-group{
			width:220px;
			margin-right: 10px;
		}
		.input-group-addon{
			width:88px;
		}
	</style>
	<script>
		function ResetForm() {
			$("input[name='userinfo.realName']").val("");
			$("input[name='userinfo.carNo']").val("");
		}
	
	</script>
</head>
<body>
	
	<div>
		<ul class="nav nav-tabs" name="nav-tabs" role="tablist">
			<li class="active" name="list"><a class="btn  " href="javascript:show('list');">列表</a></li>
			<li name="picture"> <a class="btn " href="javascript:show('imagelist');">图表</a></li>
		</ul>	
	</div>
	
	<div class="content" type="list">
		
		<!-- 条件查询 -->
		<s:if test="#request.query>0">
		<div>
			<form class="form-inline" role="form" action="${action}" id="mainForm" method="post"> 
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span>司机姓名 </div>
						<input class="form-control" type="text" placeholder="司机姓名"
								style="width: 120px" name="userinfo.realName" />
					</div>
				</div>
				
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-road"></span>车牌号</div>
						<input class="form-control" type="text" placeholder="车牌号"
							style="width: 120px" name="userinfo.carNo" />
					</div>
				</div>
				
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon"><span class="glyphicon glyphicon-th"></span>状态</div>
						<select class="form-control" style="width: 120px"
							name="userinfo.status">
							<option value="">--状态--</option>
							<option value="0" />锁定</option>
							<option value="1" />正常</option>
						</select>
					</div>
				</div>
				
						<input type="submit" value="查询" class="btn" />
						&nbsp;&nbsp;&nbsp;
						<input type="button" value="重置" class="btn"  onclick="ResetForm()"/>
						&nbsp;&nbsp;&nbsp;
						<s:if test="#request.add>0">
							<a href="${action}?method=add"  class="btn btn-success "><span class="glyphicon glyphicon-user"></span>添加用户 </a>
						</s:if>
				
			</form><!-- form -->
		</div><!-- 条件查询 -->
		</s:if>
	

		<table class="table table-hover" style="width:98%;min-width:1000px;">
			<tr>
				<th>头像</th>
				<th>司机姓名</th>
				<th>常用车牌号</th>
				<th>上次登录时间</th>
				<th>账户余额</th>
				<th>用户积分</th>
				<th>用户信用度</th>
				<th>登录终端类型</th>
				<th>注册时间</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<s:iterator id="l" value="list" status="index">
				<tr  ondblclick="view('${userId}');"  >
					<td><img class="userphoto img-circle"  style="width:25px;height:25px;cursor:pointer;" 
							src="${userPhoto }"  default="images/user/default.gif"   /></td>
					<td><s:property value="#l.realName" /></td>
					<td>${carNo}</td>
					<td><s:date name="#l.loginTime" format="yyyy-MM-dd hh:mm:ss" />
					</td>
					<td><s:property value="#l.accountBalance" />元</td>
					<td><s:property value="#l.score" /></td>
					<td><s:property value="#l.credit" /></td>
					<td><s:property value="#l.typeName" /></td>
					<td><s:date name="#l.createTime" format="yyyy-MM-dd hh:mm:ss" />
					</td>
					<td><s:property value="#l.statusName" /></td>
					<td>
						<span class="btn btn-primary glyphicon glyphicon-list-alt" data-toggle="popover-detail" title="司机信息" data-content="姓名：<font color=red>${realName}<br></font>
									常用车牌：${carNo}<br>
									电话：${phone}<br>
									性别：${genderName} ">
								
						</span> <s:if test="#request.update>0">
							<a class="btn btn-info"
								href="${action}?method=update&id=${userId}"> <span
								class="glyphicon glyphicon-edit" title="修改"></span> </a>
						</s:if> <s:if test="#request.delete>0 && ststus!=-1">
							<a class="btn btn-danger" href="javascript:del(${userId})"
								title="删除"> <span class="glyphicon glyphicon-trash"></span>
							</a>
						</s:if><s:if test="#request.locking>0 && status==1">
							<a class="btn btn-primary" href="javascript:dele(${userId})" style="background-color:#CC66FF"
								title="锁定"> <span class="glyphicon glyphicon-lock"></span>
							</a>
						</s:if><s:if test="#request.delocking>0 && status==0">
							<a class="btn btn-success" href="javascript:delet(${userId})"
								title="解锁"> <span class="glyphicon glyphicon-share"></span>
							</a>
						</s:if>
						</td>
				</tr>
			</s:iterator>
	</table>
	<!-- 分页 -->
		<div name="pannal-pagecontrol">
			<div name="tablebooter" style="font-size: 13px font-family : '宋体'" align="center">
				
					共&nbsp; ${page.totalRow } &nbsp;条记录,
					共&nbsp; ${page.totalPage } &nbsp;页,
					
					&nbsp;&nbsp;
					<a class="submit"  href="${action}?page.currentPage=1&page.pageSize=${page.pageSize}" style="text-decoration:none;">
						<img src="images/page/PaginStart.gif"	border="0" />
					</a>
					&nbsp;&nbsp;
					<s:if test="page.hasPrePage==true">
						<a class="submit" href="${action}?page.currentPage=${page.prePage}&page.pageSize=${page.pageSize}" style="text-decoration:none;" 	>
							<img src="images/page/PaginLeft.gif" border="0" />
						</a>
					</s:if>
					<s:else>
						<img src="images/page/PaginLeftInactive.gif" border="0" title="已是第一页"/>
					</s:else>
					&nbsp;&nbsp;
					第:
					<select name="page.currentPage" onchange="changePage()" >
						 <script>
						 	var totalpage = "${page.totalPage}";
						 	var currentPage = "${page.currentPage}";
							for(var i=1; i<=totalpage; i++)
							{
								if(i==currentPage)
									document.write("<option value='"+i+"' selected >"+i+"</option>");
								else
									document.write("<option value='"+i+"' >"+i+"</option>");
							}
						 </script>
					</select>
					页
					&nbsp;&nbsp;
					<s:if test="page.hasNextPage==true">
						<a class="submit" href="${action}?page.currentPage=${page.nextPage}&page.pageSize=${page.pageSize}"  style="text-decoration:none;">
							<img src="images/page/PaginRight.gif" border="0" />
						</a>
					</s:if>
					<s:else>
						<img src="images/page/PaginRightInactive.gif" border="0" title="已到达最后一页" />
					</s:else>
					&nbsp;&nbsp;
					<a class="submit" href="${action}?page.currentPage=${page.totalPage}&page.pageSize=${page.pageSize}"  style="text-decoration:none;">
						<img src="images/page/PaginEnd.gif" border="0" />
					</a> 
					
					每页显示
					<select name="page.pageSize" onchange="ResetSelect();changePage();" >
						<option value="5" >5</option>				
						<option value="10" >10</option>				
						<option value="15" >15</option>				
						<option value="20" >20</option>				
						<option value="50" >50</option>				
						<option value="100" >100</option>				
						<option value="200" >200</option>				
						<option value="500" >500</option>				
					</select>
					<script>
						$("select[name='page.pageSize']").val("${page.pageSize}");
					</script>
					条记录&nbsp;
	
			</div>
	
			<script>
				function ResetSelect(){
					$("select[name='page.currentPage']").val('1');
				}
				function changePage(){
					var curPage = $("select[name='page.currentPage']").val();
					var pageSize = $("select[name='page.pageSize']").val();
					var url = "${action}?page.currentPage="+curPage+"&page.pageSize="+pageSize;
					$("#mainForm").attr("action", url);
					$("#mainForm").submit();
				}
			
				$(document).ready(function(){
					$("a[class='submit']").click(function (event)
					{
					    event.preventDefault();
					});
					
					$("a[class='submit']").bind("click", function(){
						var url = $(this).attr("href");
						$("#mainForm").attr("action", url);
						$("#mainForm").submit();
					});
				});
	
			</script>
		</div>	<!-- end of 分页 -->
	</div><!-- end of list -->
	
	<!-- 头像列表 -->
	<div class="content" type="imagelist" style="display:none;">
		<div class="container-fluid">
			<s:iterator id="l" value="list" status="index">
				<span class="col-xs-1 user-item" style="width:140px;height:170px;" >
					<a href="${action}?method=view&id=${userId}">
						<img class="userphoto img-thumbnail" src="${userPhoto}" default="images/user/default.gif" style="width:120px;height:120px;cursor:pointer;" />
					</a> <br/>
					<span class="nowrap-ellipsis" title="${userName}" style="display:inline-block;width:120px;" >帐号: ${userName} </span> <br/>
					<span class="nowrap-ellipsis" title="${realName}" style="display:inline-block;width:120px;" >姓名: ${realName}</span> <br/>
					<br/>
				</span>
			</s:iterator>
		</div>
	</div><!-- end of 头像列表 -->
	
	<br/>

	<div style="display:none;" id="uploaddiv">
		<form action="UploadAction?callback=callback"  method="post" ENCTYPE="multipart/form-data" target="hidden_frame" >
			<input type=file name=file onchange="uploadPhoto(this);" />
			<input type="text" name="dir"  value="user/photos" /><br>
		</form>
		<iframe name="hidden_frame"></iframe>
	</div>
	<script>
			//切换显示方式
			function show(showstyle){
	    		$("div.content").hide();
    			$("div.content[type='"+showstyle+"']").show();
	    	}  	
	</script>
</body>
</html>
